<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body>
	<form class="layui-form" action="" lay-filter="role-edit-form" style="margin-top: 20px;">
		<div>
			<input name="roleId" type="hidden" th:value="${role.roleId}">
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">角色名称：</label>
			<div class="layui-input-block">
				<input name="roleName" lay-verify="required" autocomplete="off" class="layui-input"
					th:value="${role.roleName}" placeholder="请输入角色名">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">角色备注：</label>
			<div class="layui-input-block">
				<input name="remark" placeholder="请输入备注" autocomplete="off" class="layui-input"
					th:value="${role.remark}" lay-verify="required">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">选择权限：</label>
			<div class="layui-input-block">
				<div id="LAY-auth-tree-index"></div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" lay-filter="role-edit">立即提交</button>
			</div>
		</div>
	</form>

	<div th:include="include::footer"></div>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
		layui.config({
			base : '/sys/js/',
		}).extend({
			authtree : 'authtree',
		}).use([ 'layer', 'authtree', 'jquery', 'form' ], function() {
			var $ = layui.jquery;
			var layer = layui.layer;
			var authtree = layui.authtree;
			var form = layui.form;
			//设置缓存
			$.ajax({
				url : "/sys/menu/choose",
				dataType : 'json',
				async : false,
				success : function(res) {
					//渲染权限树
					var ids = JSON.parse('[[${role.menuIds}]]');
					console.log(ids);
					//list->转树
					// 深坑注意：如果API返回的数据是字符串，那么 startPid 的数据类型也需要是字符串
					var trees = authtree.listConvert(res.data, {// 支持自定义递归字段、数组权限判断等
						primaryKey : 'menuId',
						startPid : 0,
						parentKey : 'parentId',
						nameKey : 'name',
						valueKey : 'menuId',
						checkedKey : ids, //选中的ids
					//disabledKey : res.data.disabledId
					});
					// 如果页面中多个树共存，需要注意 layfilter 需要不一样，否则触发事件会混乱
					authtree.render('#LAY-auth-tree-index', trees, {
						inputname : 'menuIds[]',
						layfilter : 'lay-check-auth',
						themePath : '/sys/css/',
						theme : 'auth-skin-default',
						//openall: true,
						autowidth : true,
					});
				},
				error : function(xml, errstr, err) {
					layer.alert(errstr + '，获取样例数据失败，请检查是否部署在本地服务器中！');
				}
			});

			//监听提交
			form.on('submit(role-edit)', function(data) {
				//提交数据data.field
				$.ajax({
					cache : true,
					type : "POST",
					url : "/sys/role/update",
					data : data.field,
					async : false,
					error : function(request) {
						layer.alert("Connection error");
					},
					success : function(r) {
						if (r.retCode == '0000') {
							parent.layer.msg("修改成功");
							parent.location.reload(); // 父页面刷新
							var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
							parent.layer.close(index);
						} else {
							layer.alert(r.retMsg)
						}
					}
				});
				return false;
			});
		});
	</script>
</body>
</html>